<template>
  <div class="map">
    <div class="left">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      <el-tree
        :data="tree"
        show-checkbox
        node-key="id"
        highlight-current
        ref="tree"
        :filter-node-method="filterNode"
        default-expand-all
        @check="nodeClick"
      ></el-tree>
    </div>
    <echars-map ref="map" :checkNodeList="checkNodeList"></echars-map>
  </div>
</template>

<script>
import { mapList } from "../../common/map";
import { mapGetters } from "vuex";
import map from "../../components/echars/map/map";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      tree: [],
      filterText: "",

      option: {
        title: {
          text: "全国厂房分布图",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function(param) {
            console.log(param);
            return param.data.value[3];
          }
        },
        bmap: {
          center: [107.114129, 35.550339],
          zoom: 6,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd"
                }
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                }
              }
            ]
          }
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "bmap",
            // data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "purple"
              }
            }
          }
        ]
      },
      checkNodeList: []
    };
  },
  created() {
    this.tree = mapList;
  },
  computed: {
    ...mapGetters(["resize"])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  components:{
    'echars-map':map
  },
  mounted() {
    this.getNodeList();
    window.onresize = (() => {
      this.setResize(!this.resize)
    })
  },
  methods: {
    filterNode(value, data, node) {
      if (!value) return true;
      if (data.label.indexOf(value) !== -1) {
        return true;
      }
      return this.checkChildNodeList(value, data, node);
    },
    checkChildNodeList(value, data, node) {
      const { level } = node;
      if (level === 1) {
        return false;
      }
      let parentData = node.parent;
      let index = 0;
      while (index < level - 1) {
        console.log(parentData);
        if (parentData.data.label.indexOf(value) !== -1) {
          return true;
        }
        parentData = parentData.parent;
        index++;
      }
      return false;
    },
    getNodeList() {
      let treeList = this.$refs.tree.getCheckedNodes();
      this.checkNodeList = [];
      for (let node of treeList) {
        if (node.log && node.lat) {
          let obj = node;
          this.checkNodeList.push(node);
        }
      }
    },
    nodeClick() {
      this.getNodeList();
    },
    ...mapMutations({
      setResize: "SET_RESIZE"
    })
  }
};
</script>

<style lang="scss" scoped>
.map {
  position: absolute;
  width: 100%;
  border-bottom: 1px solid #ccc;
  top: 60px;
  bottom: 0;
  .left {
    width: 14%;
    float: left;
    border-right: 1px solid #e9e9e9;
    overflow-y: scroll;
    height: 100%;
  }
  
}
</style>